<template>
<mt-loadmore id="home-list" class="scrollable" :top-method="loadTop" ref="loadmore">
  <md-list v-infinite-scroll="loadBottom"
    infinite-scroll-disabled="true"
    infinite-scroll-distance="10">
      <gallery-list :listData='uniqueList'></gallery-list>
  </md-list>
  <p class="page-infinite-loading" v-show="homeList.loadMore"><mt-spinner class="loadmore-spinner" type="fading-circle"></mt-spinner>
    加载中...
  </p>
  <md-spinner v-if="homeList.showLoading" class="loading-spinner" :md-size="75" :md-stroke="2" md-indeterminate></md-spinner>
</mt-loadmore>
</template>
<script>
import {mapActions, mapState} from 'vuex'
export default {
  mounted () {
    this.initHomeList(0)
  },
  computed: {
    ...mapState([
      'homeList',
      'common'
    ]),
    uniqueList () {
      var hash = {}
      return this.homeList.data.reduce((item, next) => {
        hash[next.gid] ? '' : hash[next.gid] = true && item.push(next)
        return item
      }, [])
    }
  },
  methods: {
    ...mapActions([
      'initHomeList',
      'homeListLoadMore',
      'homeListLoadTop'
    ]),
    async loadBottom () {
      try {
        await this.homeListLoadMore({params: this.common.search.searchParams.basicSearch})
      } catch (e) {
        console.log(e)
      }
    },
    async loadTop () {
      try {
        await this.homeListLoadTop({refs: this.$refs, params: this.common.search.searchParams.basicSearch})
      } catch (e) {
        console.log(e)
      }
    }
  },
  components: {
    galleryList: require('./galleryList')
  }
}
</script>

<style>
.scrollable {
  overflow: auto!important;
  height:100%
}
.mint-loadmore-content {
  height: 100%;
}
.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  margin-left: -32.5px;
  margin-top: -32.5px;
}
.page-infinite-loading {
  text-align: center;
  height: 30px;
  line-height: 30px;
  margin: 0
}
.loadmore-spinner {
  display: inline-block;
  vertical-align: middle;
  margin-right: 5px;
}
</style>
